import React from 'react';
import styled from 'styled-components';
import LinearGradient from 'react-native-linear-gradient';
import { TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import TabBar from '../../components/TabBar';
import Message from '../Message';
import MeComp from '../Me';
import WorkComp from '../Work';
import Alarm from '../Alarm';
import RecentContacts from '../RecentContacts';

class CustomTabBar extends React.Component {
  render() {
    // tabBar 的配置，加入不同的 content: <Component /> 来展现不同的页面
    console.log('------------------123456', this.props.policeBaseInfoVo);
    const tabBarConfig = [
      {
        selected: 'message',
        title: '消息',
        titleStyle: { color: '#B2BCC7', fontSize: 12 },
        selectedTitleStyle: { color: '#746AFE' },
        renderIcon: (
          <TabBarIcom
            source={require('../../assets/tabbar/message_icon.png')}
          />
        ),
        renderSelectedIcon: (
          <TabBarIcom
            source={require('../../assets/tabbar/message_icon_active.png')}
          />
        ),
        clicked(_this) {
          _this.setState({ selectedTab: 'message' });
        },
        content: <Message policeBaseInfoVo={this.props.policeBaseInfoVo} />
      },
      {
        selected: 'phonebook',
        title: '通讯录',
        titleStyle: { color: '#B2BCC7', fontSize: 12 },
        selectedTitleStyle: { color: '#746AFE' },
        renderIcon: (
          <TabBarIcom
            source={require('../../assets/tabbar/phonebook_icon.png')}
          />
        ),
        renderSelectedIcon: (
          <TabBarIcom
            source={require('../../assets/tabbar/phonebook_icon_active.png')}
          />
        ),
        clicked(_this) {
          _this.setState({ selectedTab: 'phonebook' });
        },
        content: <RecentContacts />
      },
      {
        selected: 'alarm',
        title: '一键报警',
        titleStyle: { color: '#B2BCC7', fontSize: 12 },
        selectedTitleStyle: { color: '#746AFE' },
        renderIcon: (
          <TabBarIcom source={require('../../assets/tabbar/alarm_icon.png')} />
        ),
        renderSelectedIcon: (
          <TabBarIcom source={require('../../assets/tabbar/close_alarm.png')} />
        ),
        clicked(_this) {
          console.log(_this.state);
          _this.setState({ selectedTab: 'alarm' });
        },
        content: <Alarm />
      },
      {
        selected: 'work',
        title: '工作',
        titleStyle: { color: '#B2BCC7', fontSize: 12 },
        selectedTitleStyle: { color: '#746AFE' },
        renderIcon: (
          <TabBarIcom source={require('../../assets/tabbar/work_icon.png')} />
        ),
        renderSelectedIcon: (
          <TabBarIcom
            source={require('../../assets/tabbar/work_icon_active.png')}
          />
        ),
        clicked(_this) {
          _this.setState({ selectedTab: 'work' });
        },
        content: <WorkComp />
      },
      {
        selected: 'me',
        title: '我的',
        titleStyle: { color: '#B2BCC7', fontSize: 12 },
        selectedTitleStyle: { color: '#746AFE' },
        renderIcon: (
          <TabBarIcom source={require('../../assets/tabbar/me_icon.png')} />
        ),
        renderSelectedIcon: (
          <TabBarIcom
            source={require('../../assets/tabbar/me_icon_active.png')}
          />
        ),
        clicked(_this) {
          _this.setState({ selectedTab: 'me' });
        },
        content: <MeComp />
      }
    ];

    return (
      <Container>
        <CustomLinearGradient colors={['#FEB270', '#FE8972']}>
          <TouchableOpacity
            onPress={() => {
              tabBarConfig
                .find(item => item.selected === 'alarm')
                .clicked(this.TabBar);
            }}>
            <TabBarIcom
              source={require('../../assets/tabbar/alarm_icon.png')}
            />
          </TouchableOpacity>
        </CustomLinearGradient>

        {/* bottom tabbar */}
        <TabBar
          ref={c => (this.TabBar = c)}
          tabBarConfig={tabBarConfig}
          selectedTab="message"
        />
      </Container>
    );
  }
}

const mapStateToProps = ({ user: { policeBaseInfoVo } }) => {
  console.log('-------------------------', policeBaseInfoVo);
  return {
    policeBaseInfoVo
  };
};

export default connect(mapStateToProps)(CustomTabBar);

// 一键报警定位以及渐变色
const CustomLinearGradient = styled(LinearGradient)`
  position: absolute;
  width: 49;
  height: 49;
  background-color: #fe8972;
  justify-content: center;
  align-items: center;
  border-radius: 49;
  bottom: 20;
  left: 50%;
  margin-left: -24.5;
  z-index: 999;
`;

const TabBarIcom = styled.Image`
  width: 22;
  height: 22;
`;

const Container = styled.View`
  height: 100%;
  width: 100%;
`;
